@charset "utf-8";
@function l($lun){
    @return $lun/640*100%
}
//头部
.homepage{
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: url(../img/homepage/bg.png) no-repeat center/cover;
    
    .logo{
        width: l(203);
        left: l(44);
        top: 22px;
        position: absolute;
    }
    .snow1{
        width: l(30);
        left: l(60);
        top: 100px;
        position: absolute;
        transform: scale(0);
        animation: snow .5s infinite;
    }
    .snow2{
        width: l(50);
        left: l(110);
        top: 160px;
        position: absolute;
         transform: scale(0);
        animation: snow .9s infinite;
    }
    .snow3{
        width: l(60);
        left: l(50);
        top: 300px;
        position: absolute;
         transform: scale(0);
        animation: snow 1.2s infinite;
    }
    .snow4{
        width: l(100);
        left: l(500);
        top: 210px;
        position: absolute;
         transform: scale(0);
        animation: snow 1.5s infinite;
    }
    .tree{
        width: l(300);
//      left: l(100);
        text-align: center;
        margin-top: 150px;
//      position: absolute;
    }
    .star{
        width: l(115);
        left: l(258);
        top: 95px;
        position: absolute;
    }
    .decorate{
        width: l(500);
        left: l(77);
        top: 400px;
        position: absolute;
    }
    .title1{
         width: l(380);
        left: l(125);
        top: 430px;
        position: absolute;
//      transform: translateX(0);
        animation: lrdo 2s infinite;
    }
    .title2{
         width: l(256);
        left: l(192);
        top: 482px;
        position: absolute;
        
    }
    
    .bingo{
        width: l(192);
        left: l(224);
        top: 535px;
        position: absolute;
    }
    .tie{
         width: l(512);
        left: l(64);
        top: 522px;
        position: absolute;
    }
    .draw{
        width: l(320);
        height: 200px;
        left: l(166);
        top: 589px;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        background: #56984b;
        position: absolute;
        img{
            margin-top: 17px;
            width: 20px;
//          animation: come 1s infinite;
        }
        p{
            color: white;
            font-size: 23px;
            
        }
    }
}

//动画
//雪花
@keyframes snow{
   from{transform: scale(0) rotate(0deg);}
   50%{transform: scale(1) rotate(180deg);}
   to{transform: scale(0) rotate(360deg);}
}
//文字
@keyframes lrdo{
    from{left: l(100);}
    50%{left: l(125);}
    to{left: l(100);}
    
}
@keyframes come {
    from{transform: scale(1);}
    50%{transform: scale(2);}
    to{transform: scale(1);}
}
